// 简单动画函数封装 obj 目标对象  target 目标位置   callback 添加一个回调函数
function animate(obj, target, callback) {
    // 当不断点击按钮 这个元素的速度会越来越快 因为开启太多的定时器
    // 解决方案就是让我们元素只有一个定时器执行
    clearInterval(obj.timer)
    // 获得盒子当前位置
    // 让盒子在当前位置加1个移动距离
    // 利用定时器不断重复这个操作
    // 加一个结束定时器的条件
    // 注意 此元素需要添加定位 才能使用  element.style.left 
    obj.timer = setInterval(function () {
        // 步长值写到定时器里面
        // 把步长值改为整数  不要出现小数的问题
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            //停止动画  就是停止定时器
            clearInterval(obj.timer)
            // 回调函数下载定时器里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback
        }
        // 把每次加 1 这个步长值改为一个慢慢变小的值  步长值公式 : (目标值 - 现在的位置) / 10;
        // obj.style.left = obj.offsetLeft + 1 + 'px';
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}